<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            margin: 0px;
        }
        .header{
            height: 20px;
            background-color:#ffffff;
        }
        .header .left{
            height: 20px;
            width: 86%;
            background-color: #ffffff;
            float: left;
            text-align:right;
        }
        .header .right{
            height: 20px;
            width: calc(100% - 86% - 10px);
            background-color: #ffffff;
            float: right;
            margin-right: 10px;
            text-align:right;
        }
        .center1{
            height: 80px;
            width: 60%;
            background-color: #ffffff;
            margin: auto;
            padding-top: 20px;
        }
        .center1 img{
            height: 50px;
        }
        .center1 .child1{
            height: 50px;
            width: 50%;
            padding: 18px;
            padding-right: 400px;
            padding-top: 12px;
            padding-bottom: 10px;
            font-size: 15px;
            background-color: #ffffff;
            border: solid 1px;
        }
        .center1 .child2{
            height: 50px;
            width: 10%;
            font-size: 20px;
            background-color: #3388ff;
            padding: 10px;
        }
        .center1 .child3{
            height: 50px;
            width: 10%;
            font-size: 20px;
            background-color: #ffffff;
            padding: 10px;
            border: solid 1px;
        }
        .center1 .child4{
            height: 50px;
            width: 5%;
            font-size: 10px;
            background-color: #ffffff;
            margin: right;
            text-decoration: underline;
        }

        .center2{
            height: 30px;
            width: 65%;
            background-color:#f9f4d9;
            margin: auto;
            margin-top: 20px;
        }
        .center2 .child1{
            line-height: 30px;
            font-size: 10px;
            color: #8f7f5d;
            padding-left: 12px;
        }
        .center2 .child2{
            line-height: 30px;
            font-size: 10px;
            color: #338de6;
        }
        .center2 .child3{
            line-height: 30px;
            font-size: 20px;
            color: #927f60;
            float: right;
            padding-right: 10px;
        }

        .center3{
            height: 50px;
            width: 100%;
            background-color: #459df5;
        }
        .center3 .child1{
            line-height: 50px;
            color: #f5f5f5;
            padding-left: 200px;
        }
        .center3 .child2{
            color: #f5f5f5;
            line-height: 50px;
            float: right;
            padding-right: 200px;
        }
        .center4{
            height: 280px;
            width: 100%;
            background-color:#2043a1;
        }
        .center4 img{
            height: 220px;
            margin-left: 300px;
            margin-top: 30px;
        }
        .right1 img{
            height: 220px;
            position: fixed;
            right: 10px;
            bottom: 250px;
        }
        .footer{
            height: 1500px;
            width: 100%;
            background-color: #F5F5F5;
        }
        .footer .child{
            height: 1000px;
            width: 70%;
            background-color: #FFFFFF;
            margin: auto;
            border-top-width: 20px;
            border-top-style: solid;
            border-top-color: #F5F5F5;
        }
        
        .footer .left img{
            margin-top: 30px;
        }
        .footer .right img{
            margin-top: -50px;
        }
        .footer .child .child1{
            margin-left: 30px;
            font-size: 40px;
        }
        .footer .child .child2{
            color: #999999;
            margin-left: 10px;
            font-size: 12px;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="left">网页　新闻　贴吧　知道　音乐　图片　视频　地图　文库　百科</div>
        <div class="right">|　百度首页　登录　注册 </div>
    </div>
    <div class="center1">
        <img src="picture1.png">
        <span class="child1">百度贴吧</span>
        <span class="child2">进入词条</span>
        <span class="child3">全站搜索</span>
        <span class="child4">帮助</span>
    </div>
    <div class="center2">
        <span class="child1">声明：百科词条人人可编辑，词条创建和修改均免费，
            绝不存在官方及代理商付费代编，请勿上当受骗。</span>
        <span class="child2">详情>></span>
        <span class="child3">×</span>
    </div>
    <div class="center3">
        <span class="child1">首页　　　　秒懂百科　　　　特色百科　　　　用户　　　　权威合作</span>
        <span class="child2">下载百科APP　|　个人中心</span>
    </div>
    <div class="center4">
        <img src="picture2.png">
    </div>
    <div class="right1">
        <img src="picture3.png">
    </div>
    <div class="footer">
        <div class="child">
            <div class="left">
            <img hspace='480' src="picture4.png">
            <span class="child1">贴吧</span>
            <span class="child2">锁定</span>
            <span class=""></span>
            </div>
            <div class="right">
                <img hspace='700' src="picture5.png">
            </div>
        </div>
            
    </div>
    
    
</body>
</html>